<template>
  <div class="page-wrapper">
    <!-- 选择器 -->
    <h1 class="main-title">添加学生</h1>
    <div class="main-card wrapper">
      <el-form class="form" ref="form" :inline="true" :model="formData">
        <el-form-item label="学生姓名" required prop="name" :rules="rules.name">
          <el-input v-model.trim="formData.name" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="学号" required prop="account" :rules="rules.account">
          <el-input v-model.trim="formData.account" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" :rules="rules.sex">
          <el-radio-group v-model="formData.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="院系/专业" prop="facultyWithMajor" :rules="rules.facultyWithMajor">
          <major-selector v-model="formData.facultyWithMajor"></major-selector>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" :rules="rules.phone">
          <el-input v-model.trim="formData.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" required prop="password" :rules="rules.password">
          <el-input v-model.trim="formData.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUserInfo">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 未分配宿舍学生信息 -->
    <h1 class="main-title">未分配宿舍学生</h1>
    <div class="main-card wrapper">
      <StudentTable :tableData="tableData" :tableLoading="tableLoading" />
      <Pagination :total="count" :page="current" @pagination="handlePagination" :hidden="tableData.length === 0" />
    </div>
  </div>
</template>

<script>
import StudentTable from '@/components/StudentTable'
import Pagination from '@/components/Pagination'
import { getNoFenpeiInfo } from '@/api/user'
import { deepClone } from '@/utils'
import { addUser } from '@/api/user'
import MajorSelector from '@/components/MajorSelector'

export default {
  name: 'StudentAdd',
  components: {
    StudentTable,
    Pagination,
    MajorSelector
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码需要6位以上'))
      } else {
        callback()
      }
    }
    return {
      formData: {
        name: '',
        account: '',
        phone: '',
        password: '',
        role: 'student',
        sex: 0,
        facultyWithMajor: []
      },
      searchOption: {},
      current: 1,
      count: 0,
      step: 10,
      tableData: [],
      tableLoading: false,
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            //pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码'
          }
        ],
        id_number: [
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '请输入正确的身份证号码'
          }
        ],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        account: [{ required: true, message: '请输入学号', trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        facultyWithMajor: [{ required: true, message: '请选择专业', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.fetchTableData()
  },
  methods: {
    addUserInfo() {
      this.$refs.form.validate(result => {
        if (result) {
          let addUserInfo = this.formData
          addUserInfo.facultyId = this.formData.facultyWithMajor[0]
          addUserInfo.majorId = this.formData.facultyWithMajor[1]
          addUser(addUserInfo).then(() => {
            this.$message.success('添加学生信息成功')
            this.fetchTableData()
          })
        } else {
          this.$message.error('请填充完整信息')
        }
      })
    },
    fetchTableData() {
      const params = deepClone(this.searchOption)
      params.current = this.current
      params.step = this.step
      this.tableLoading = true
      //查询没有分配宿舍的学生
      getNoFenpeiInfo(params)
        .then(res => {
          this.tableData = res.data.rows
          this.count = res.data.count
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    handlePagination({ page, limit }) {
      this.current = page
      this.step = limit
      this.fetchTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 40px 0;
}
</style>
